import { listReceipt } from '@/services/api/api-pressconference';
import { UserOutlined } from '@ant-design/icons';
import { ProList, ProTable } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import { useModel } from '@umijs/max';
import { Alert, Avatar, Flex, Space, Tag, Typography } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import UpdateReceipt from './UpdateReceipt';

interface ListReceiptProps {
  recordId: string | undefined;
  deadlineTime: string;
  type?: 1 | 2;
  createdCombineId?: string;
  reload?: boolean;
}

const ListReceipt: React.FC<ListReceiptProps> = ({
  recordId,
  deadlineTime,
  type,
  createdCombineId,
  reload,
}) => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const actionRef = useRef<ActionType>();
  const [search, setSearch] = useState<string>('');

  useEffect(() => {
    actionRef.current?.reloadAndRest();
  }, [createdCombineId]);

  useEffect(() => {
    actionRef.current?.reload();
  }, [reload]);

  return (
    <ProList<PressconferenceData.ReceiptPage>
      headerTitle={
        deadlineTime ? (
          <>截止日期：{deadlineTime}</>
        ) : (
          <Alert
            message="包含参会人员信息"
            type="info"
            showIcon
            style={{
              fontSize: 12,
            }}
          />
        )
      }
      ghost
      request={async (params = {}) => {
        const response = await listReceipt({
          recordId,
          type,
          createdCombineId,
          search: search,
          ...params,
        });
        return Promise.resolve({
          data: response.data,
          total: response.data.length,
          success: response.code === 0,
        });
      }}
      actionRef={actionRef}
      rowKey="id"
      dateFormatter="string"
      pagination={false}
      toolbar={{
        search: {
          allowClear: true,
          onSearch: (value: string) => {
            setSearch(value);
            actionRef.current?.reloadAndRest();
          },
        },
      }}
      metas={{
        title: {
          dataIndex: 'createdOrganizationName',
          render: (dom, entity) => {
            return (
              <Flex
                style={{
                  width: '737px',
                }}
                justify={'space-between'}
                align={'center'}
              >
                <Space size={0}>
                  <Tag color={entity.type === 2 ? '#87d068' : '#1AA15F'}>
                    {entity.type === 2 ? '已回复' : '已阅读'}
                  </Tag>
                  <Avatar
                    size="small"
                    icon={<UserOutlined />}
                    src={entity.createdOrganizationAvatar}
                  />
                  <span
                    style={{
                      marginLeft: '5px',
                      marginRight: '5px',
                    }}
                  >
                    {entity.createdOrganizationName}
                  </span>
                  -
                  <span
                    style={{
                      marginLeft: '5px',
                    }}
                  >
                    {entity.createdAccountName}
                  </span>
                </Space>
                <Space size={10}>
                  <a>{entity.createdTime}</a>
                  {access.新闻发布x配置x接收者 && (
                    <UpdateReceipt
                      receipt={entity}
                      onSave={function (): void {
                        actionRef.current?.reloadAndRest();
                      }}
                    />
                  )}
                </Space>
              </Flex>
            );
          },
        },
        description: {
          dataIndex: 'content',
          render: (dom, entity) => {
            return entity.content ? (
              <div>
                <Typography.Paragraph style={{ flexGrow: 1, margin: 0 }} type="secondary">
                  <blockquote>{entity.content}</blockquote>
                </Typography.Paragraph>
                <ProTable
                  columns={[
                    {
                      title: (
                        <span
                          style={{
                            color: '#99a3b7',
                            fontSize: 12,
                            textAlign: 'center',
                            fontWeight: 'normal',
                          }}
                        >
                          姓名
                        </span>
                      ),
                      dataIndex: 'name',
                      align: 'center',
                    },
                    {
                      title: (
                        <span
                          style={{
                            color: '#99a3b7',
                            fontSize: 12,
                            textAlign: 'center',
                            fontWeight: 'normal',
                          }}
                        >
                          电话
                        </span>
                      ),
                      dataIndex: 'phone',
                      align: 'center',
                    },

                    {
                      title: (
                        <span
                          style={{
                            color: '#99a3b7',
                            fontSize: 12,
                            textAlign: 'center',
                            fontWeight: 'normal',
                          }}
                        >
                          描述
                        </span>
                      ),
                      dataIndex: 'describes',
                      align: 'center',
                    },
                  ]}
                  defaultSize={'small'}
                  ghost
                  rowKey="id"
                  search={false}
                  options={false}
                  pagination={false}
                  dateFormatter="string"
                  dataSource={entity.participates}
                />
              </div>
            ) : (
              <></>
            );
          },
        },
      }}
    />
  );
};

export default ListReceipt;
